<template>
	<!-- 完善个人信息-个人信息 -->
	<view class="setting">
		<!-- <view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+48)+'rpx'"></view>
		<view class="top z_index" :style="'padding-top:'+ menuButtonInfo.top + 'px'">
			<u-icon @click="goNavigateBack" class="top_icon" name="arrow-left" color="#000000" size="40"></u-icon>
			<view class="top_title">完善个人信息</view>
		</view> -->
		
		<!-- <view class="setting_content" :style="'padding-top:'+ (2*menuButtonInfo.top+48) + 'rpx'"> -->
		<view class="setting_content">
			<!-- <view class="speed">
				<u-line-progress height="4" active-color="#909499" inactive-color="#e1e3e5" :show-percent="false" :round="false" :percent="progressPercent"></u-line-progress>
			</view> -->
			<view class="setting_title">个人信息</view>
			<view class="form">
				<view class="form_"><text>*</text>头像</view>
				<view class="form_upload">
<!-- 					<u-upload ref="uUpload" :size-type="['compressed']" :auto-upload="false" :show-progress="false" @on-choose-complete="onChange" @on-remove="onRemove" class="addBtn_" :custom-btn="true" :width="176" :height="176" :max-count="1" :file-list="fileList" >
						<view slot="addBtn" class="addBtn">
							<u-icon name="plus" color="#909499" size="48"></u-icon>
						</view>
					</u-upload> -->
					 <!-- <view class="butUpdata" @click="ff_suUpload"></view> -->
					<u-upload ref="uUpload" :size-type="['compressed']" :auto-upload="false" :show-progress="false" @on-choose-complete="onChange" @on-remove="onRemove" class="addBtn_" :custom-btn="true" :width="176" :height="176" :max-count="2" :file-list="fileList" :preview-full-image="false" :deletable="false" @on-preview="onPreview" @on-progress="onProgress">
						<!-- isNone -->
						<view slot="addBtn" class="addBtn" :style="{opacity: isNone ? 0 : 1}">
							<u-icon name="plus" color="#909499" size="48"></u-icon>
						</view>
					</u-upload>
					
				</view>
				
				<view class="form_"><text>*</text>昵称</view>
				<input class="form_input" type="text" placeholder="神经蛙真精神" v-model="user.nickname"/>
				
				<view class="form_"><text>*</text>性别</view>
				<view class="form_region">
					<picker @change="confirmRegion" mode="selector" :range="regionGender">
						<input :value="user.gender == 1 ? '男' : user.gender == 2 ? '女' : ''" @click="getRegion" class="form_input" type="text" :disabled="true" placeholder="请选择你的性别" />
						<image src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
					</picker>
					<!-- <u-picker mode="selector" v-model="showRegion"  :dvefault-selector="[0]" :range="selectorRegion" @confirm="confirmRegion"></u-picker> -->
				</view>
				
				<view class="form_"><text>*</text>所在地区</view>
				<view class="form_region">
					<picker @change="bindPickerChange" mode="region" :value="region">
						<input :value="user.address" @click="getPoition" class="form_input" :disabled="true" type="text" placeholder="请选择你所在的地区" />
						<image src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
						<!-- <u-picker v-model="showPoition" mode="region" @confirm="confirmPoition"></u-picker> -->
					</picker>
				</view>
				
				<view class="form_"><text>*</text>手机号</view>
				<button type="default" class="button" open-type='getPhoneNumber' @getphonenumber="getPhoneNumberFn">
					<input class="form_input_" :disabled="true" type="text" placeholder="请获取你的手机号" :value="phone == 200 ? '请获取你的手机号' :phone" />
				</button>
				
				
				<view class="form_">公司名称</view>
				<input class="form_input" type="text" placeholder="请输入公司名称" v-model="company"/>
				
				<view class="form_">职位</view>
				<input class="form_input" type="text" placeholder="请输入职位" v-model="post"/>
				
				<view class="form_"><text>*</text>出生日期</view>
				<view class="form_region">
					<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
						<!-- <input :value="birthday" @click="getBirthday" class="form_input" :disabled="true" type="text" placeholder="请选择你的生日" /> -->
						<input :value="birthday" class="form_input" :disabled="true" type="text" placeholder="请选择你的生日" />
						<image src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
						<!-- <u-calendar v-model="showBirthday" mode="date" @change="changeBirthday"></u-calendar> -->
					 </picker>
				</view>
				
			</view>
		</view>
		
		<view class="foot">
			<view class="foot_title" @click="goLabel">完成</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showBirthday: false,
				selectorRegion: ["男","女"],	//性别 0=未知 1=男 2=女
				selectorRegionIndex: 0,	//性别 0=未知 1=男 2=女
				showRegion: false,
				showPoition: false,
				ossSignData: {},	//上传步骤一
				fileList: [],
				// menuButtonInfo: {
				// 	top: 25
				// },
				progressPercent: 50,// 进度条
				userInfo: '',
				phone: '',//手机号码
				company: '',//公司名称
				post: '', //职位
				user: {
					address: '',//地址
					age: '0',//年龄
					avatar: '',//头像url
					gender: '',//性别 0=未知 1=男 2=女
					nickname: '',//昵称
				},
				urlToFile: [],
				valuePosition: '',//选择的城市
				configDirName: '', //随机数
				birthday: '',
				region: ['广东省', '广州市',''],
				regionGender:['男','女'],
				isNone:false,
				
				
			}
		},
		watch: {
			fileList(newVal,oldVal){
				if(newVal[0].url){
					this.isNone = true
				}
			}
		},
		onLoad(param) {
			this.init(param)
			// console.log("12312312321")
		},
		onShow() {
			
		},
		computed: {
			
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			userObj(){
				return this.$store.state.userObj;
			}
		},
		methods: {
			// test(){
			// 	let fn01 = item01=>{
			// 		return fn02(item01)
			// 		 fn02 = item02=>{
			// 			return item02
			// 		}
			// 	}
			// 	fn01(1);
			// },
			getPhoneNumberFn(e) {
				this.$apis.wxPhone({
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
				}).then( res => {
					console.log("获取电话号码", res)
					
					if(!(isNaN(res.data))){
						this.phone = res.data
					}else{
						uni.showToast({
							title: "获取电话失败，请重新授权",
							icon: "none"
						})
					}
				})
				
			},
			init(param) {
				this.$apis.ossSign().then(res => {
					this.ossSignData = res.data
					console.log("图片上传1：this.ossSignData", this.ossSignData)
				})
				console.log('param',param)
				
				
				if(param.isLogin == '1') {
					this.userInfo = uni.getStorageSync('userInfo')
					console.log('this.userInfo--->',this.userInfo)
					this.region = [this.userInfo.province, this.userInfo.city, '']
					
					console.log("this.userInfo", this.userInfo)
					this.user.avatar = this.userInfo.avatarUrl
					this.user.gender = this.userInfo.gender
					this.user.nickname = this.userInfo.nickName
					this.fileList = [{url: this.userInfo.avatarUrl}]
				}else if(this.userObj != null){
						console.log("this.userObj", this.userObj)
						this.phone        = this.userObj.Phone;
						this.company      = this.userObj.company;
						this.post         = this.userObj.post;
						let newUser       =  {};
						newUser.address   = this.userObj.address;
						newUser.age       = this.userObj.age;
						newUser.avatar    = this.userObj.avatar;
						newUser.gender    = this.userObj.gender;
						newUser.nickname  = this.userObj.nickname;
						this.user =  newUser;
						this.fileList = [{url:newUser.avatar}]
						let birthday_ = this.$Tools.setDateBirthday(this.userObj.birthday)
						this.birthday = birthday_
				}
				
			},
			goNavigateBack() {
				uni.navigateBack()
			},
			goLabel() {
				let isBlurInput = this.blurInput()
				console.log("isBlurInput",isBlurInput)
				if(isBlurInput){
					return
				}
				
				console.log("完善提交的数据：",this.user)
				console.log("公司名称：",this.company)
				console.log("手机号码：",this.phone)
				this.$apis.accountEdit({
					phone: this.phone,
					company: this.company,
					user: {
						address: this.user.address,
						age: 0,
						avatar: this.user.avatar,
						gender: this.user.gender,
						nickname: this.user.nickname,
						company: this.company,
						post: this.post,
						birthday: this.birthday
				}
				}).then(res => {
					console.log("提交成功，完善个人信息：", res)
					uni.hideLoading()
					if(res && res.data && res.data.code == 503){
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 2500
						})
					}else{
						uni.setStorageSync('registerToast',2);
						uni.showToast({
							title:"已完善！"
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
						
						// uni.setStorage({
						// 	key: "userPhone",
						// 	data: this.phone,
						// 	success: res => {
						// 		// uni.navigateTo({
						// 		// 	url: '../label/label'
						// 		// })
								
						// 	}
						// })
					}
					
				}).catch(err => {
					console.log("提交失败：", err)
				})
				
				// uni.navigateTo({
				// 	url: '../label/label'
				// })
			},
			onProgress(e) {
				console.log("上传111：", e)
				this.$refs.uUpload.clear();
			},
			onChange(e) {
				// 
				this.isNone = true;
				if(e.length >= 2){
					this.$refs.uUpload.remove(0);
					
				}
				console.log("onChange", e)
				this.urlToFile = e[0].file
				let _token = uni.getStorageSync('token')
				let config = this.ossSignData
				config.token = uni.getStorageSync('token')
				// this.configDirName = parseInt(Math.random()*100000000000000)
				this.configDirName = new Date().getTime()
				uni.uploadFile({
					url: config.host,
					file: this.urlToFile,
					filePath: this.urlToFile.path,
					name: "file",
					formData: {
						'key': config.dir + "/" + this.configDirName +".jpg",
						'policy': config.policy,
						'OSSAccessKeyId': config.accessid,
						'signature': config.signature,
						'success_action_status': '200',
						'callback': config.callback,
						'x:auth': config.token,
						'x:owner_type': 2
					},
					success: (resFile) => {
						console.log("上传成功,resFile:", resFile.data);
						let _resData = JSON.parse(resFile.data)
						let code = _resData.code;
						if(code == 200){
							
							this.user.avatar = _resData.data.filename	//上传成功头像url
						}else if(code == 500){
							this.user.avatar = ""
							this.$refs.uUpload.clear();
							this.isNone = false;
							uni.showToast({
											title: "图片不合法 请重新上传",
											icon: "none"
							})
						}
						
					},
					fail: (err) => {
						console.log("上传失败,res:", err);
					
					}
				})
			
			},
			getRegion() {
				this.showRegion = !this.showRegion
			},
			getPoition() {
				console.log("this.showPoition",this.showPoition)
				this.showPoition = !this.showPoition
			},
			getBirthday() {
				this.showBirthday = !this.showBirthday
			},
			changeBirthday(e){
				this.birthday = e.result
			},
			bindDateChange: function(e) {
				console.log("确定日期",e)
				this.birthday = e.target.value
			},
			confirmPoition(e) {
				this.valuePosition = e.province.label + '·' + e.city.label + '·' + e.area.label
				this.user.address = this.valuePosition
			},
			bindPickerregionGender(){
				
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e)				
				this.valuePosition = e.target.value[0] + '·' + e.target.value[1] + '·' + e.target.value[2]
				this.user.address = this.valuePosition
				this.index = e.target.value
			},
			confirmRegion(e) {
				console.log(e)
				this.user.gender = parseInt(e.detail.value)+1
				console.log("this.selectorRegionIndex",this.user.gender)
			},
			blurInput() {
				if(this.user.nickname == ''){
					uni.showToast({
						title: "昵称不能为空",
						icon: "none"
					})
					return true;
				}
				if(this.user.gender == ''){
					uni.showToast({
						title: "请选择性别",
						icon: "none"
					})
					return true;
				}
				if(this.user.address == ''){
					uni.showToast({
						title: "请选择地区",
						icon: "none"
					})
					return true;
				}
				if(this.user.avatar == ''){
					uni.showToast({
						title: "请选择头像",
						icon: "none"
					})
					return true;
				}
				if(this.phone == 200 || this.phone == '' || !/^1[3456789]\d{9}$/.test(this.phone)){
					uni.showToast({
						title: "请获取你的手机号",
						icon: "none"
					})
					return true;
				}
				// if(this.post == ''){
				// 	uni.showToast({
				// 		title: "请输入职位",
				// 		icon: "none"
				// 	})
				// 	return true;
				// }
				// if(this.company == ''){
				// 	uni.showToast({
				// 		title: "请输入公司名称",
				// 		icon: "none"
				// 	})
				// 	return true;
				// }
				if(this.birthday == ''){
					uni.showToast({
						title: "请选择出生日期",
						icon: "none"
					})
					return true;
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
			
		}
	}
</script>

<style>
	.bg_top{
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}
	.z_index{
		z-index: 10;
	}
	.top{
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}
	.top_icon{
		margin-left: 32rpx;
		display: inline-block;
	}
	.top_title{
		position: absolute;
		font-size:34rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}
	.setting_content{
		margin: 0 40rpx 250rpx 40rpx;
	}
	.speed{
		width: 670rpx;
		margin-top: 20rpx;
	}
	.setting_title{
		margin-top: 50rpx;
		font-size: 40rpx;
		font-weight: 700;
		color: #2d3034;
	}
	.form{
		padding-bottom: 200rpx;
	}
	.form_{
		margin: 40rpx 0 10rpx 0;
		font-size: 30rpx;
		font-weight: 700;
		color: #2d3034;
		position: relative;
	}
	.form_ text{
		color: #f10200;
		position: absolute;
		top: -6rpx;
		left: -16rpx;
	}
	.form_upload{
		width: 176rpx;
		height: 176rpx;
		position: relative;
		/* border-radius: 50%; */
	}
	.butUpdata{
		width: 176rpx;
		height: 176rpx;
		background-color: rgba(0,0,0,0);
		position: absolute;
		z-index: 999;
	}
	.addBtn{
		
		width: 176rpx;
		height: 176rpx;
		background-color: #F5F6F9;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		/* z-index: -1; */
		
	}
	.addBtn_{
		/* width: 176rpx;
		height: 176rpx; */
/* 		border-radius: 50% !important;
		overflow: hidden !important; */
	}
	.addBtn image{
		width: 48rpx;
		height: 48rpx;
	}
	.form_input{
		margin-top: 20rpx;
		padding: 20rpx 0 20rpx 30rpx;
		color: #2d3034;
		background: #f5f6f9;
		border-radius: 6px;
		width: 630rpx;
		height: 84rpx;
		font-size: 30rpx;
	}
	.form_input_{
		/* margin-top: 20rpx; */
		padding: 20rpx 0 20rpx 30rpx;
		/* padding-left: 30rpx; */
		color: #2d3034;
		background: #f5f6f9;
		border-radius: 6px;
		width: 650rpx;
		height: 84rpx;
		font-size: 30rpx;
	}
	.form_region{
		position: relative;
	}
	.form_region image{
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		right: 43rpx;
		top: 50rpx;
	}
	.foot{
		width: 670rpx;
		height: 84rpx;
		padding: 16rpx 40rpx 68rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}
	.foot_title{
		width: 670rpx;
		height: 84rpx;
		color: #FFFFFF;
		background: #f10200;
		border-radius: 6px;
		line-height: 84rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 700;
	}
	/deep/ .data-v-49deb6f2{
		border: none !important;
		background: none !important;
	}
	/deep/ .data-v-49deb6f2 image{
		height: 156rpx !important;
		/* border-radius: 50% !important; */
	}
	.button{
		/* background: red !important; */
		margin: 0 !important;
		padding: 0 !important;
		text-align: left;
		/* padding-left: 20rpx !important; */
	}
	.button::after{
		border:  none !important;
	}
	/deep/ .u-calendar__action {
		padding: 40rpx 0 40rpx 0;
		display: flex !important;
		justify-content: center !important;
	}
	/deep/ .u-preview-image{
		border-radius: 50% !important;
	}
</style>
